<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>作品 | 作品类型</title><!-- 显示对应作品类型-->
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/app.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/ie/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/respond.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">

  <section class="vbox">
            <section class="w-f-md" id="bjax-target">
              <section class="hbox stretch">

            <!-- side content -->
                <aside class="aside bg-light dk" id="sidebar">
                  <section class="vbox animated fadeInUp">
                    <section class="scrollable hover">
                      <div class="list-group no-border no-bg m-t-n-xxs m-b-none auto">
                        <a href="<%=(basePath)%>user/loadArticleByType?type=0" target="article" class="list-group-item" id="year1">
                          全部
                        </a>
                        <a href="<%=(basePath)%>user/loadArticleByType?type=1" target="article" class="list-group-item active" id="year2">
                          DV作品
                        </a>
                        <a href="<%=(basePath)%>user/loadArticleByType?type=2" target="article" class="list-group-item" id="year3">
                          动画作品
                        </a>
                        <a href="<%=(basePath)%>user/loadArticleByType?type=3" target="article" class="list-group-item" id="year4">
                          平面作品
                        </a>
                        <a href="<%=(basePath)%>user/loadArticleByType?type=4" target="article" class="list-group-item" id="year5">
                          网页作品
                        </a>
                        <a href="<%=(basePath)%>user/loadArticleByType?type=5" target="article" class="list-group-item" id="year6">
                          移动应用
                        </a>
                        <a href="<%=(basePath)%>user/loadArticleByType?type=6" target="article" class="list-group-item" id="year7">
                          微课作品
                        </a>
                        <a href="<%=(basePath)%>user/loadArticleByType?type=7" target="article" class="list-group-item" id="year8">
                          课件作品
                        </a>
                        
                      </div>
                    </section>
                  </section>
                </aside>
                <!-- / side content -->
                <!-- DV作品 点击不同类型跳转到不同类型的副页-->
                <section>
                  <section class="vbox">
                      <iframe name="article" width="100%" height="100%" frameborder="0" src="<%=(basePath)%>user/loadArticleByType?type=1" >

                      </iframe>

                  </section>

                </section>
          </section>
        </section>
      </section>

  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
  <!-- App -->
  <script src="${pageContext.request.contextPath}/js/app.js"></script>
  <script src="${pageContext.request.contextPath}/js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/app.plugin.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/demo.js"></script>
  <script>
    $("#year1").click(function () {
      $("#year1").attr("class","list-group-item active");
      $("#year2").attr("class","list-group-item");
      $("#year3").attr("class","list-group-item");
      $("#year4").attr("class","list-group-item");
      $("#year5").attr("class","list-group-item");
      $("#year6").attr("class","list-group-item");
      $("#year7").attr("class","list-group-item");
      $("#year8").attr("class","list-group-item");

    });
    $("#year2").click(function () {
      $("#year2").attr("class","list-group-item active");
      $("#year1").attr("class","list-group-item");
      $("#year3").attr("class","list-group-item");
      $("#year4").attr("class","list-group-item");
      $("#year5").attr("class","list-group-item");
      $("#year6").attr("class","list-group-item");
      $("#year7").attr("class","list-group-item");
      $("#year8").attr("class","list-group-item");

    });
    $("#year3").click(function () {
      $("#year3").attr("class","list-group-item active");
      $("#year2").attr("class","list-group-item");
      $("#year1").attr("class","list-group-item");
      $("#year4").attr("class","list-group-item");
      $("#year5").attr("class","list-group-item");
      $("#year6").attr("class","list-group-item");
      $("#year7").attr("class","list-group-item");
      $("#year8").attr("class","list-group-item");

    });
    $("#year4").click(function () {
      $("#year4").attr("class","list-group-item active");
      $("#year2").attr("class","list-group-item");
      $("#year3").attr("class","list-group-item");
      $("#year1").attr("class","list-group-item");
      $("#year5").attr("class","list-group-item");
      $("#year6").attr("class","list-group-item");
      $("#year7").attr("class","list-group-item");
      $("#year8").attr("class","list-group-item");

    });
    $("#year5").click(function () {
      $("#year5").attr("class","list-group-item active");
      $("#year2").attr("class","list-group-item");
      $("#year3").attr("class","list-group-item");
      $("#year4").attr("class","list-group-item");
      $("#year1").attr("class","list-group-item");
      $("#year6").attr("class","list-group-item");
      $("#year7").attr("class","list-group-item");
      $("#year8").attr("class","list-group-item");

    });
    $("#year6").click(function () {
      $("#year6").attr("class","list-group-item active");
      $("#year2").attr("class","list-group-item");
      $("#year3").attr("class","list-group-item");
      $("#year4").attr("class","list-group-item");
      $("#year5").attr("class","list-group-item");
      $("#year1").attr("class","list-group-item");
      $("#year7").attr("class","list-group-item");
      $("#year8").attr("class","list-group-item");

    });
    $("#year7").click(function () {
      $("#year7").attr("class","list-group-item active");
      $("#year2").attr("class","list-group-item");
      $("#year3").attr("class","list-group-item");
      $("#year4").attr("class","list-group-item");
      $("#year5").attr("class","list-group-item");
      $("#year6").attr("class","list-group-item");
      $("#year1").attr("class","list-group-item");
      $("#year8").attr("class","list-group-item");

    });
    $("#year8").click(function () {
      $("#year8").attr("class","list-group-item active");
      $("#year2").attr("class","list-group-item");
      $("#year3").attr("class","list-group-item");
      $("#year4").attr("class","list-group-item");
      $("#year5").attr("class","list-group-item");
      $("#year6").attr("class","list-group-item");
      $("#year7").attr("class","list-group-item");
      $("#year1").attr("class","list-group-item");

    });
  </script>
</body>
</html>